<template>
  <div>
    <el-container>
      <el-header style="height: 200px; margin-top: -60px;">
        <div>
          <indexTop v-bind:name="routerMsg.name"></indexTop>
        </div>
      </el-header>
      <el-main class="main-div">
        <div class="main-div-1">
          <img src="../../assets/login-icon.jpg">
        </div>
        <div class="main-div-2">
          <div class="main-div-h3">
            <h3>请您填写注册信息</h3>
          </div>
          <div class="main-div-form">
            <el-form :model="loginForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="loginForm.phone"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="checkPassword">
                <el-input type="password" v-model="loginForm.checkPassword" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="验证码" prop="code">
                <el-input style="width: 250px; float: left;" v-model="loginForm.code"></el-input>
                <el-button @click="verification" v-if="isShow" style="width: 150px; height: 40px; float: left;"
                           type="warning">{{ codeName }}
                </el-button>
                <el-button v-if="!isShow" style="width: 150px; height: 40px; float: left;" type="info">
                  <i class="el-icon-loading"></i>
                  <span>{{ count }}</span> 秒
                </el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即注册</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
                <router-link :to="{ path: '/login',query: {id: newID, name: newName}}">
                  <el-button type="success">前往登录</el-button>
                </router-link>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-main>
      <el-footer style="height: 200px;">
        <div>
          <Bottom></Bottom>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import indexTop from "@/components/indexTop"
import Bottom from "@/components/bottom"

export default {
  name: "login",
  components: {
    indexTop,
    Bottom
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.loginForm.checkPassword !== '') {
          this.$refs.ruleForm.validateField('checkPassword');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.loginForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      isShow: true,
      codeName: '获取手机验证码',
      count: 0,
      code1: '',
      routerMsg: {
        id: '',
        name: ''
      },
      newID: '',
      newName: '',
      loginForm: {
        phone: '',
        password: '',
        checkPassword: '',
        code: ''
      },
      rules: {
        phone: [
          {required: true, message: '请输入手机号码', trigger: 'blur'},
          {min: 11, max: 11, message: '长度为 11 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, validator: validatePass, trigger: 'blur'}
        ],
        checkPassword: [
          {required: true, validator: validatePass2, trigger: 'blur'}
        ],
        code: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
          {min: 6, max: 6, message: '长度为 6 个字符', trigger: 'blur'}
        ]
      }
    }
  },
  mounted() {
    this.getMsg()
  },
  methods: {
    // 获取路由信息
    getMsg() {
      this.routerMsg = this.$route.query
      if (this.routerMsg.id == '0') {
        this.newID = '1'
        this.newName = '学生登录平台'
      } else if (this.routerMsg.id == '2') {
        this.newID = '3'
        this.newName = '评审人员登录平台'
      }
    },
    // 各角色注册
    roleRegister(id){
      var url = ''
      if (id == '0'){
        // 学生角色
        url = 'student-register'
      }else if (id == '2'){
        // 评审人员角色
        url = 'assessor-register'
      }
      this.$axios.post('http://localhost:8888/' + url, this.loginForm).then(res => {
        if (res.data.code == 0){
          this.$message({
            message: '恭喜你，注册成功',
            type: 'success'
          });
          this.isShow = true
        } else {
          this.$message.error('错了哦，注册失败' + res.data.msg)
          this.isShow = false
        }
      }).catch(err => {
        return Promise.reject(err)
      })
    },
    // 立即注册按钮事件
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 校验输入的手机验证码是否正确
          if (this.code1 == this.loginForm.code){
            // 注册
            this.roleRegister(this.$route.query.id)
          }else{
            this.$message({
              message: '警告哦，验证码输入错误，请重新输入',
              type: 'warning'
            });
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 重置按钮事件
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 手机验证码倒计时
    verification() {
      if (this.loginForm.phone != '') {
        // 发送验证码
        this.$axios.get('http://localhost:8888/getShortCode/' + this.loginForm.phone + '/' + this.routerMsg.id).then(res => {
          if (res.data.code == 0) {
            this.code1 = res.data.data
            this.$message({
              message: '恭喜你，验证码发送成功',
              type: 'success'
            });
            this.isShow = true
            this.codeName = '验证码发送成功'
          } else if (res.data.code == -1 && res.data.msg == "验证码已存在，还未过期") {
            this.$message.error('错了哦，验证码' + res.data.msg);
            this.isShow = false
          } else if (res.data.code == -1 && res.data.msg == "发送失败") {
            this.$message.error('错了哦，验证码' + res.data.msg + '，请重新获取');
            this.isShow = false
          }
        }).catch(err => {
          return Promise.reject(err)
        })
        this.isShow = false;
        this.count = 60;
        var times = setInterval(() => {
          this.count--; //递减
          if (this.count <= 0) {
            // <=0 变成获取按钮
            this.isShow = true;
            clearInterval(times);
          }
        }, 1000); //1000毫秒后执行
      } else {
        this.$message.error('错了哦，请填写注册信息');
      }
    },
  }

}
</script>

<style scoped>
.main-div-h3 {
  position: relative;
  top: 0;
  left: 0;
  height: 100px;
  width: 700px;
}

.main-div-h3 h3 {
  position: relative;
  top: -70px;
  left: -180px;
}

.main-div-form {
  position: relative;
  top: -65px;
  left: 90px;
  width: 500px;
}

.main-div-1 {
  position: absolute;
  top: 187px;
  left: 50px;
  width: 710px;
  height: 400px;
  margin-right: 35px;
}

.main-div-2 {
  position: absolute;
  top: 187px;
  left: 735px;
  width: 700px;
  height: 360px;
  background-color: #ffffff;
}

img {
  width: 90%;
  height: 90%;
}

.main-div {
  margin-left: 50px;
  margin-right: 50px;
  margin-top: -50px;
  margin-bottom: 30px;
  height: 420px;
  background: #2980b9;
  background: -webkit-linear-gradient(to right, rgb(41, 128, 185), rgb(109, 213, 250), rgb(255, 255, 255));
  background: linear-gradient(to right, rgb(41, 128, 185), rgb(109, 213, 250), rgb(255, 255, 255));
}

.el-header, .el-footer {
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
